<template>
  <div id="app" style="position: relative">
    <router-view />
    <div v-if="taskShow" class="card-block">
      <el-card v-if="item.show" class="card-item" v-for="item in task" :key="item.id">
        <div slot="header">
          <span>任务提醒</span>
          <el-button @click="item.show=false" icon="el-icon-close" circle size="mini"></el-button>
        </div>
        <div class="task-content">{{item.content}}</div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getWarnNum } from '@/api/incident'
import { warnTask } from '@/api/task'

export default {
  name: 'App',
  beforeDestroy() {
    clearInterval(this.incidentTimer);
  },
  data(){
    return{
      incidentTimer:null,
      task:[

      ],
    }
  },
  computed:{
    taskShow(){
      for(let i=0;i<this.task.length;i++){
        if(this.task[i].show==true){
          return true
        }
      }
      return false;
    }
  },
  mounted() {
    this.setIncidentTimer();
    this.getTask()
  },
  methods:{
    setIncidentTimer(){
      clearInterval(this.incidentTimer);
      getWarnNum().then(res=>{
        this.$bus.$emit('warnNum',res)
      })
      this.incidentTimer=setInterval(()=>{
        getWarnNum().then(res=>{
          this.$bus.$emit('warnNum',res)
        })
      },5000)
    },
    getTask(){
      warnTask().then(res=>{
        res.forEach(item=>{
          item.show=true
        })
        this.task=res;
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.card-block{
  position: absolute;
  right: 5px;
  bottom: 0;
  width: 300px;
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .card-item{
    width: 100%;
    margin: 10px 0;
  }
}
.card-block::-webkit-scrollbar{
  width: 0;
}
</style>
<style lang="scss">
.card-item{
  .el-card__header{
    padding: 0 20px;
    height: 40px;
    >div{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
